import { Button, ButtonVariants, Container, Wrapper } from '@/shared/ui';
import { Footer } from '@/widgets/Footer';
import { Header } from '@/widgets/Header';
import Image from 'next/image';

import Code from './500.png';
import cs from './ServerError.module.scss';

export const ServerError = () => (
  <div className={cs.wrapper}>
    <Header />
    <div className={cs.bg} />
    <Wrapper>
      <Container className={cs.content} small>
        <div className={cs.img}>
          <Image alt="500" draggable={false} fill src={Code} />
        </div>
        <span className={cs.descr}>
          Ошибка сервера.
          <br />
          Проводятся работы по обслуживанию сервера.
        </span>
        <Button className={cs.btn} data-testid="link-main" href="/" link target="_self" variant={ButtonVariants.Main}>
          Главная
        </Button>
      </Container>
    </Wrapper>
    <Footer />
  </div>
);
